<template>
  <div class="home">
    <el-collapse v-model="activeName">
      <el-collapse-item name="1">
        <template slot="title">
          <div>小游戏</div>
          <i class="header-icon el-icon-coordinate"></i>
        </template>
        <div class="games">
          <div
            class="game"
            v-for="(item, index) of smallGame"
            :key="index"
            @click="toUrl(item.name)"
          >
            <img class="imgs" :src="path(item.name)" />
            <div>{{ item.title || item.name }}</div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <div>more</div>
          <i class="header-icon el-icon-more"></i>
        </template>
        <div>敬请期待</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      activeName: ["1"],
      smallGame: [
        { name: "2048" },
        { name: "mine_clearance", title: "扫雷" },
        { name: "flappybird" },
        { name: "brick", title: "打砖块" },
        { name: "gobang", title: "五子棋" },
        { name: "plane" },
        { name: "superMarie" },
      ],
    };
  },
  methods: {
    path(name) {
      return require(`../assets/logos/${name}.png`);
    },
    toUrl(name) {
      // window.open(name, "_blank");
      window.open(name, "_self");
    },
  },
};
</script>

<style scoped>
.games {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
}
.game {
  margin: 20px;
}
.imgs {
  width: 100px;
  height: 100px;
  cursor: pointer;
}
</style>
